<template>
  <div class="tt">
    <div class="header">
      <div class="nav">
        <span>北京</span>
        <h3>全城</h3>
        <p>帅选</p>
      </div>
      <div class="right">
        <div class="search">
          <span>综合排序</span>
        </div>
        <van-icon active-class="active" name="search" @click="$router.push({path:'/search'})" />
      </div>
    </div>
    <div class="ll" ref="moviesScroll">
      <div class="movielist">
        <Ditem v-for="item in data.datalist" :key="item.id" :data="item"></Ditem>
      </div>
    </div>
  </div>
</template>


<script>
import { get } from "@/api/http";
import Ditem from "./Ditem";

import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
BScroll.use(Pullup);
export default {
  components: {
    Ditem,
  },
  data() {
    return {
      data: {
        datalist: [],
        pagesize: 10,
        start: 0,
        hasMore: true,
      },
    };
  },
  created() {
    this.getdata();
    this.getMoredata();
  },
  methods: {
    // 第一次数据
    async getdata() {
      let rs = await get("/api/coming", {
        _start: this.data.start,
        _end: this.data.start + this.data.pagesize
      });
      this.data.datalist.push(...rs.data);
      // console.log(rs);
      this.$nextTick(() => {
        this.setMoviesScroll();
      });
    },
    // 第一次数据以外
    async getMoredata() {
      let rs = await get("/api/list", {
        _start: this.data.start,
        _end: this.data.start + this.data.pagesize
      });
      this.data.datalist.push(...rs.data);
      this.data.start+=this.data.pagesize;
      console.log(rs);
      if(rs.data.length<this.data.pagesize){
        this.hasMore=false;
      }
      this.$nextTick(() => {
        this.setMoviesScroll();
      });
    },
    setMoviesScroll() {
      // 判断
      if (this.moviesScroll) {
        // 拖动滚动条完成
        this.moviesScroll.finishPullUp();
        //重新计算滚动条
        this.moviesScroll.refresh();
        return;
      }
      this.moviesScroll = new BScroll(this.$refs.moviesScroll, {
        scrollY: true,
        pullUpLoad: true,
      });
       // 翻页
      this.moviesScroll.on("pullingUp", () => {
        console.log("up...");
        // 第一页之外的其它页面的数据
          if (this.data.hasMore) {
            this.getMoredata();
          }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tt {
  display: flex;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .ll {
    flex: 1;
    overflow: hidden;
  }
}
.header {
  height: 40px;
  margin-top: 10px;
  display: flex;
  .nav {
    width: 200px;
    height: 32px;
    display: flex;
    padding-left: 4px;
    position: relative;
    span {
      width: 46px;
      font-weight: 500;
      font-size: 15px;
      &::after {
        content: "";
        border-style: solid;
        border-width: 4px;
        border-color: #000 transparent transparent transparent;
        position: absolute;
        bottom: 14px;
        left: 36px;
      }
    }
    h3 {
      width: 46px;
      font-weight: 500;
      font-size: 15px;
      &::after {
        content: "";
        border-style: solid;
        border-width: 4px;
        border-color: #000 transparent transparent transparent;
        position: absolute;
        bottom: 14px;
        left: 82px;
      }
    }
    p {
      width: 46px;
      font-weight: 500;
      font-size: 15px;
      &::after {
        content: "";
        border-style: solid;
        border-width: 4px;
        border-color: #000 transparent transparent transparent;
        position: absolute;
        bottom: 14px;
        left: 132px;
      }
    }
  }
  .right {
    display: flex;
    .search {
      flex: 1;
      position: relative;
      span {
        &::after {
          content: "";
          border-style: solid;
          border-width: 4px;
          border-color: #000 transparent transparent transparent;
          position: absolute;
          bottom: 12px;
          left: 66px;
        }
      }
    }
    i::before {
      font-size: 20px;
      margin-left: 24px;
      margin-top: 4px;
    }
  }
}
</style>